<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>物品列表</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="http://localhost:8080/css/goodslist.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <form action="/goodslist" method="get">
                    <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 15px">首页</button>
                </form>
            </ul>
            <ul class="nav navbar-nav">
                <form action="/release" method="get">
                    <button type="submit" class="btn btn-info" style="margin-top: 8px">发布商品</button>
                </form>
            </ul>
            <div class="navbar-form navbar-left">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入物品名称" name="goodsName">
                    </div>
                    <button type="button" class="btn btn-primary" onclick="getPageNumBySearch('name')">立即搜索
                    </button>
                </form>
            </div>
            <ul class="nav navbar-nav navbar-right" id="naviInfo">

            </ul>
        </div>
    </div>
</nav>

<section class="tabBox" id="tabBox">
    <a class="tabNavItem tabNavItemActive" onclick="showPage(null,null,null,1)">发布时间</a>
    <a class="tabNavItem" onclick="showPage('order','thumbNum',null,1)">点赞量</a>
    <a class="tabNavItem" onclick="showPage('order','commentNum',null,1)">评论量</a>
    <div class="navbar-form navbar-left" style="margin-left: 35%">
        <form>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入搜索类别" name="type">
            </div>
            <button type="button" class="btn btn-primary" onclick="getPageNumBySearch('type')">立即搜索</button>
        </form>
    </div>

</section>
<br>
<section class="goodsBox w1200">
    <div class="container-fluid">
        <div class="row" id="info">

        </div>
        <!--分页-->
        <div class="pull-right">
            <span style="font-size: 16px;vertical-align: 140%">
                共<strong id="totalPage"></strong>页&nbsp&nbsp&nbsp
            </span>
            <ul class="pagination" id="pagination">
            </ul>
        </div>
    </div>
</section>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

<script type="text/javascript">
    $(".tabNavItem").click(function () {
        $(".tabNavItem").removeClass('tabNavItemActive');
        $(this).addClass('tabNavItemActive');
    })

    let pageNum;

    window.onload = function () {
        getUserState();
        getPageNum();
    }

    function getUserState() {
        $.ajax({
            url: "/user/state",
            type: "GET",
            success: function (result) {
                if (result == "已登录") {
                    getNavi(1);
                } else {
                    getNavi(0);
                }
            },
            error: function () {
                alert("获取登录状态失败");
            }
        });
    }

    function getNavi(state) {
        let msg = "";
        if (state == 0) {
            msg += "<li>\n" +
                "       <form action=\"/login\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">登录\n" +
                "               </button>\n" +
                "       </form>\n" +
                "   </li>";
        } else {
            msg += "<li>\n" +
                "       <form action=\"/chatlist\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">我的消息\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>\n" +
                "   <li>\n" +
                "       <form action=\"/mysell\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">我的发布\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>\n" +
                "   <li>\n" +
                "       <form action=\"/mycollection\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">我的关注\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>" +
                "   <li>\n" +
                "       <form action=\"/logout\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">退出登录\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>";
        }
        $("#naviInfo").html(msg);
    }

    function getPageNum() {
        $.ajax({
            url: "/goodslist/pagenum",
            type: "GET",
            success: function (result) {
                pageNum = result;
                $("#totalPage").html(pageNum);
                showPage(null, null, null, 1);
            },
            error: function () {
                alert("获取页数失败");
            }
        });
    }

    function order(column, page) {
        let data;

        $.ajax({
            async: false,
            url: "/order",
            type: "GET",
            data: {"column": column, "rule": "desc", "page": page},
            success: function (result) {
                data = result;
            },
            error: function () {
                alert("获取排序数据失败");
            }
        });
        return data;
    }

    function getPageNumBySearch(column) {
        let value;
        if (column == "name") value = document.getElementsByName("goodsName")[0].value;
        else value = document.getElementsByName("type")[0].value;

        $.ajax({
            url: "/search/pagenum",
            type: "GET",
            data: {'column': column, 'value': value},
            success: function (result) {
                pageNum = result;
                $("#totalPage").html(pageNum);
                showPage('search', column, value, 1);
            },
            error: function () {
                alert("获取搜索页数失败");
            }
        });
    }

    function search(column, value, page) {
        let data;

        $.ajax({
            async: false,
            url: "/search",
            type: "POST",
            data: {"column": column, "value": value, "page": page},
            success: function (result) {
                data = result;
            },
            error: function () {
                alert("获取搜索数据失败");
            }
        });
        return data;
    }

    function getGoods(page) {
        let data;

        $.ajax({
            async: false,
            url: "/goodslist",
            type: "POST",
            data: {"page": page},
            success: function (result) {
                data = result;
            },
            error: function () {
                alert("获取搜索数据失败");
            }
        });
        return data;
    }

    function getDetail(id, type) {
        window.location.href = "/detail/" + id + "/" + type;
    }

    function showInfo(type, column, value, page) {
        let data;

        if (type == "order") data = order(column, page);
        else if (type == "search") data = search(column, value, page);
        else data = getGoods(page);

        let msg = "";

        for (let i in data) {
            let item = data[i];
            msg += "<div class=\"col-md-3\">\n" +
                "       <div class=\"goodsItemImgBox\">\n" +
                "           <img class=\"goodsItemImg\" src=\"" + item['imagePath'] + "\">\n" +
                "       </div>";
            msg += "    <div class=\"goodsItemBottom\">\n" +
                "           <div class=\"goodsItemName\">" + item['name'] + "</div>";
            msg += "        <div class=\"goodsItemDetail\">\n" +
                "               <div class=\"goodsItemDetailLeft\">\n" +
                "                   <span class=\"goodsItemDetailLeft1\">￥" + item['price'] + "</span>\n";
            msg += "                <span class=\"goodsItemDetailLeft2\">" + item['thumbNum'] + "人点赞</span>\n";
            msg += "                <br>\n" +
                "                   <span class=\"goodsItemDetailLeft2\">" + item['commentNum'] + "条评论</span>\n";
            msg += "            </div>\n" +
                "               <div class=\"goodsItemDetailRight\">\n" +
                "                   <form>\n" +
                "                       <button type=\"button\" class=\"btn btn-primary\" onclick='getDetail(" + item['id'] + "," + "1)'>查看详情</button>\n" +
                "                   </form>\n" +
                "                   <button class=\"btn btn-warning\" style=\"margin-top: 3px;margin-left: 14px\" onclick='getDetail(" + item['id'] + "," + "2)'>拍卖</button>" +
                "               </div>\n" +
                "           </div>\n" +
                "       </div>\n" +
                "   </div>";
        }
        $("#info").html(msg);
    }

    function showPage(type, column, value, page) {
        let htmlText = "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + "1)'><a href=\"#\"> << </a></li>";
        let prePage = Math.max(page - 1, 1);
        htmlText += "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + prePage + ")'><a href=\"#\"> < </a></li>";
        if (pageNum < 5) {
            for (let i = 1; i <= pageNum; ++i) {
                htmlText += "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + i + ")'";
                if (i == page) htmlText += "class='active'";
                htmlText += "><a href=\"#\">" + i + "</a></li>";
            }
        } else {
            let leftNum = page - 1;
            if (leftNum < 2) {
                for (let i = 1; i <= 5; ++i) {
                    htmlText += "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + i + ")' ";
                    if (i == page) htmlText += "class='active'";
                    htmlText += "><a href=\"#\">" + i + "</a></li>";
                }
            }
            let rightNum = pageNum - page;
            if (rightNum < 2) {
                for (let i = pageNum - 4; i <= pageNum; ++i) {
                    htmlText += "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + i + ")' ";
                    if (i == page) htmlText += "class='active'";
                    htmlText += "><a href=\"#\">" + i + "</a></li>";
                }
            }
            if (leftNum > 1 && rightNum > 1) {
                for (let i = page - 2; i <= page + 2; ++i) {
                    htmlText += "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + i + ")' ";
                    if (i == page) htmlText += "class='active'";
                    htmlText += "><a href=\"#\">" + i + "</a></li>";
                }
            }
        }
        let nextPage = Math.min(page + 1, pageNum);
        htmlText += "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + nextPage + ")'><a href=\"#\"> > </a></li>";
        htmlText += "<li onclick='showPage(\"" + type + "\",\"" + column + "\",\"" + value + "\"," + pageNum + ")'><a href=\"#\"> >> </a></li>";
        $("#pagination").html(htmlText);

        showInfo(type, column, value, page);
    }
</script>

</body>
</html>